.panel-intelligence {
    width: 100%;
    height: 100%;
    background-color: rgba(16, 34, 51, 0.5);
    position: absolute;
    top: -125rem;
    z-index: 1999;
    backdrop-filter: blur(1rem);
    perspective: 20rem;
    transition: transform 0.8s;
}

.panel-intelligence-child {
    position: absolute;
    background-color: rgba(7, 45, 56, 0.3);
}

.panel-intelligence-device {
    top: 5rem;
    left: 1rem;
    width: 38rem;
    height: 60rem;
}

.panel-intelligence-person {
    top: 5rem;
    right: 1rem;
    width: 38rem;
    height: 60rem;
}

.panel-intelligence-energy {
    top: 46.5rem;
    left: 82rem;
    width: 36.5rem;
    height: 18rem;
    background-color: rgba(0, 0, 0, 0.2);
}

.panel-intelligence-mid {
    top: 5rem;
    left: 40rem;
    width: 40rem;
    height: 60rem;
}

.panel-intelligence-import-device .title-box::before {
    content: '';
    position: absolute;
    width: 3rem;
    height: 0.8rem;
    right: 1rem;
    top: 1.3rem;
    background-color: rgba(0, 255, 255, 0.3);
    transform: skewX(-20deg);
}

.panel-intelligence-import-device  .title-box::after {
    content: '';
    position: absolute;
    width: 3rem;
    height: 0.8rem;
    right: 4.5rem;
    top: 1.3rem;
    background-color: rgba(0, 255, 255, 0.3);
    transform: skewX(-20deg);
}
.btn-flip-intelligence-import-device1{
    right: 1rem;
}
.btn-flip-intelligence-import-device2{
    right: 4.5rem;
}
.panel-kjbj {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0.2;
    filter: hue-rotate(-50deg);
}

.title-intelligence-panel {
    width: 35rem;
    text-align: center;
    color: white;
    margin: auto;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.1rem;
    background-image: linear-gradient(to right, transparent, rgba(0, 255, 255, 0.3), transparent);
    padding: 0.5rem 0;
    border-top: aqua solid 0.2rem;
    /* border-radius: 0.5rem; */
    border-image: linear-gradient(to right, transparent, aqua, transparent)1;

}

.title-intelligence-panel::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2.5rem;
    height: 0.3rem;
    margin-top: -0.8rem;
    border-radius: 1rem;
    background-color: rgb(206, 203, 0);
    border: aqua solid 0.12rem;

}

.panel-intelligence-device-count {
    position: absolute;
    top: 7rem;
    left: 0.5rem;
    width: 17rem;
    height: 19rem;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0.5rem;
}

.panel-intelligence-device-count .brightPoints {
    position: absolute;
    left: -0.5rem;
    bottom: 0.5rem;
    width: 10rem;
    height: 8rem;
    filter: drop-shadow(aqua 0 0 0.5rem) hue-rotate(-45deg) brightness(150%);
    opacity: 1;
}

.panel-intelligence-device-chart {
    position: absolute;
    top: 7rem;
    left: 19rem;
    width: 17rem;
    height: 19rem;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0.5rem;
}

.panel-intelligence-import-device {
    position: absolute;
    top: 27.5rem;
    left: 0.5rem;
    width: 35.5rem;
    height: 14.5rem;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0.5rem;
}

.panel-intelligence-device-chart .container-intelligence-device {
    width: 19rem;
    height: 20rem;
    margin-left: -2rem;
}

.container-intelligence-import-device {
    position: absolute;
    top: 3rem;
    left: 1.5rem;
    width: 35rem;
    display: flex;
    flex-wrap: wrap;
}
.chart-intelligence-import-device{
    width: 38rem;
    height: 12rem;
    margin-top: 1rem;
    margin-left: 1rem;
}
.panel-intelligence-tunnel-chart {
    position: absolute;
    top: 43.5rem;
    left: 0.5rem;
    width: 34.5rem;
    height: 15rem;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0.5rem 1rem;
}

.panel-intelligence-tunnel-chart .chart-intelligence-tunnel {
    width: 38rem;
    height: 12rem;
    margin-top: 1rem;
}


.classification-device-btns {
    display: flex;
    margin: auto;
}

.classification-device-btns1 {
    width: 20rem;
    margin-top: 0.5rem;
}
.classification-device-btns2 {
    width: 35rem;
    display: flex;
}
.classification-device-btns2>div {
    width: 35rem;
    display: flex;
}

.classification-btn {
    flex: 1;
    text-align: center;
    border-top: aqua solid 0.1rem;
    border-bottom: aqua solid 0.1rem;
    margin: 0.1rem;
    color: white;
    border-radius: 0.2rem;
    /* border-image: linear-gradient(to right, transparent, aqua, transparent)1; */
    background-image: linear-gradient(to right, transparent, rgba(0, 255, 255, 0.3), transparent);
    font-size: 0.8rem;
    padding: 0.2rem;
    transition: filter 0.2s;
    cursor: pointer;
}

.classification-btn:hover {
    filter: drop-shadow(aqua 0 0 0.5rem);
}

.classification-device-btns .btn-choosen {
    background-image: linear-gradient(to right, rgba(0, 255, 255, 0.3), rgba(0, 255, 255, 0.6), rgba(0, 255, 255, 0.3));
}



.container-total-working-hours {
    display: flex;
    margin: 1.5rem 0 0 1rem;
}

.container-average-working-hours {
    position: absolute;
    top: 6.5rem;
    left: 1rem;
    width: 14rem;
    height: 17rem;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0.5rem;
}

.container-intelligence-energy .title-container-chart {
    font-size: 0.8rem;
    width: 100%;
    color: white;
    font-weight: 600;
    letter-spacing: 0.1rem;
    border-left: aqua solid 0.3rem;
    padding: 0.1rem;
    padding-left: 1rem;
}

.chart-average-working-hours {
    width: 13rem;
    height: 15rem;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
}

.container-total-average-hours {
    position: absolute;
    top: 6.5rem;
    left: 16.5rem;
    width: 20rem;
    height: 17rem;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0.5rem;
}

.box-intelligence-person {
    position: absolute;
    top: 25rem;
    left: 1rem;
    width: 34.5rem;
    height: 15rem;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0.5rem 1rem;
}

.box-intelligence-person .btn-toggle-tasks {
    display: flex;
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.box-intelligence-person .btn-toggle-tasks>div {
    /* width: 5rem; */
    padding: 0.2rem 0.5rem;
    /* text-align: center; */
    color: rgb(255, 255, 255);
    letter-spacing: 0.1rem;
    box-shadow: black 0 0 0.3rem;
    transform: skew(-10deg);
    cursor: pointer;
    opacity: 0.5;
    transition: background-color 0.2s;
    margin-right: 0.2rem;
}

.box-intelligence-person .btn-toggle-tasks>div:hover {
    opacity: 1;
    background-color: rgba(0, 255, 255, 0.2);
}

.box-intelligence-person .btn-toggle-tasks .btn-choosen {
    color: rgb(255, 255, 255);
    box-shadow: black 0 0 0.3rem;
    opacity: 1;
    background-color: rgba(0, 255, 255, 0.3);
    pointer-events: none;
}

.box-intelligence-person .form-panel-head>div {
    font-size: 0.7rem;
}

.container-table-intelligence-person {
    height: 10rem;
    overflow-y: scroll;
    box-shadow: rgba(0, 255, 255, 0.6) 0 -0.5rem 0.5rem inset;
}

.container-table-intelligence-person>div>div {
    padding: 0.3rem;
}


.box-intelligence-spare {
    position: absolute;
    top: 43rem;
    left: 1rem;
    width: 34.5rem;
    height: 15rem;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0.5rem 1rem;
}

.box-intelligence-spare .form-panel-head>div {
    font-size: 0.7rem;
}

.container-table-intelligence-spare {
    height: 10rem;
    overflow-y: scroll;
    box-shadow: rgba(0, 255, 255, 0.6) 0 -0.5rem 0.5rem inset;
}

.container-table-intelligence-spare>div>div {
    padding: 0.3rem;
}

.container-table-intelligence-spare>div>div:nth-child(3) {
    flex: 2;
}

.container-table-intelligence-spare>div>div:last-child {
    flex: 2;
}

.container-intelligence-energy .chart-intelligence-energy {
    width: 39rem;
    height: 14rem;
    position: absolute;
    left: 0rem;
    top: 4.5rem;
}

/* ====================== mid ============================*/
/* .panel-intelligence-mid{
    top: 5rem;
    left: 40rem;
    width: 40rem;
    height: 39.5rem;
} */
.panel-intelligence-mid .kjbg {
    width: 40rem;
    height: 39.5rem;
    opacity: 0.8;
    filter: hue-rotate(-35deg);
    -webkit-mask: radial-gradient(closest-side circle, #000 30%, transparent 100%);
}

.panel-intelligence-mid .brain-bg {
    position: absolute;
    top: 6rem;
    left: 4.5rem;
    width: 30rem;
    height: 25rem;
    -webkit-mask: radial-gradient(closest-side circle, #000 0%, transparent 100%);
    /* filter: hue-rotate(-35deg) drop-shadow(aqua 0 0 0.5rem); */
    z-index: 99;
}

.panel-intelligence-mid .brain {
    position: absolute;
    top: 10.5rem;
    left: 11rem;
    width: 18rem;
    height: 16rem;
    z-index: 99;
    filter: drop-shadow(aqua 0 0 1rem) brightness(120%);
    cursor: pointer;
    transition: filter 0.3s;
    animation: brainanimation 3s alternate infinite linear;

}

.panel-intelligence-mid .brain:hover {
    animation-play-state: paused;
    filter: drop-shadow(aqua 0 0 2rem) brightness(200%);

}

@keyframes brainanimation {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.05);
    }
}

.panel-intelligence-mid .container-file-download {
    position: absolute;
    top: 0;
    z-index: 99;
}

.panel-intelligence-mid .box-ai-real-warning {
    position: absolute;
    top: 30.5rem;
    left: 1rem;
    width: 38rem;
}

.panel-intelligence-mid .box-ai-real-warning .form-panel-head {
    margin-top: 0.2rem;
}

.panel-intelligence-mid .box-ai-real-warning .form-panel-head>div {
    font-size: 0.8rem;
}

.panel-intelligence-mid .container-ai-real-warning {
    height: 8rem;
    overflow-y: scroll;
    box-shadow: rgba(0, 255, 255, 0.6) 0 -0.5rem 0.5rem inset;

}

.panel-intelligence-mid .container-ai-real-warning>div>div {
    padding: 0.5rem 0;
}

.panel-intelligence-mid .container-ai-real-warning>div>div:nth-child(3) {
    flex: 2;
}

.panel-intelligence-mid .container-ai-real-warning>div>div:nth-child(4) {
    flex: 2;
}

.panel-intelligence-mid .container-ai-count {
    position: absolute;
    top: 1.5rem;
    left: 2rem;
    display: flex;
}

.panel-intelligence-mid .container-ai-count>div {
    position: absolute;
}

.panel-intelligence-mid .panel-intelligence-bottom {
    position: absolute;
    top: 43rem;
    left: 1rem;
    height: 15rem;
    transform: rotateX(0);
    transition: transform 0.5s,opacity 0.5s;
    transform-origin: 0 0;
}

.panel-intelligence-faults-count {
    position: absolute;
    top: 0.5rem;
    left: 0rem;
    width: 15rem;
    height: 15rem;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0.5rem 1rem;
}

.panel-intelligence-faults-count .chart-intelligence-faults-count {
    width: 12rem;
    height: 16rem;
    margin: -0.5rem 0 0 1.5rem;
}

.panel-intelligence-faults {
    position: absolute;
    top: 0.5rem;
    left: 17.5rem;
    width: 18.5rem;
    height: 15rem;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0.5rem 1rem;
}

.panel-intelligence-faults .container-intelligence-faults {
    margin: 0.8rem 0.8rem;
}

/* 调整组件内部样式 */
.panel-intelligence-faults .container-intelligence-faults>div {
    margin: 0;
    margin-bottom: 1.2rem;
}

.panel-intelligence-faults .container-intelligence-faults>div>div:nth-child(1) {
    width: 6rem;
    text-align: right;
}

.panel-intelligence-faults .container-intelligence-faults>div>div:nth-child(3) {
    padding-left: 1rem;
}

.panel-intelligence-singal-ai {
    position: absolute;
    top: 43.5rem;
    left: 1rem;
    width: 36rem;
    height: 15rem;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0.5rem 1rem;
    transform: rotateX(90deg);
    transition: transform 0.5s,opacity 0.5s;
    transform-origin: 0 0;
}
.panel-intelligence-singal-ai .page-toggle{
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: gray;
    cursor: pointer;
}
.panel-intelligence-singal-ai .page-toggle:hover{
    color: rgb(0, 255, 255);
}
.chart-intelligence-singal-ai {
    width: 42rem;
    height: 12rem;
    margin-top: 1rem;
}

